<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>role_list</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/publish_article.css" />
		<script src="node_modules/axios/dist/axios.js"></script>
	</head>
	<body>
		<!-- 按钮触发模态框 -->
		<div class="container col-sm-12">
			<form role="form" class="col-sm-8 article_form" id="add_claafily">
				<div class="form-group col-sm-12 add_role">
					<label for="name" class="col-sm-12 title_lab">角色添加</label>

					<!-- 模态框（Modal） -->
					<div
						class="modal fade"
						id="myModal"
						tabindex="-1"
						role="dialog"
						aria-labelledby="myModalLabel"
						aria-hidden="true"
					>
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button
										type="button"
										class="close"
										data-dismiss="modal"
										aria-hidden="true"
									>
										&times;
									</button>
									<h4 class="modal-title" id="myModalLabel">添加角色</h4>
								</div>
								<div class="modal-body">
									<form class="form-horizontal" role="form">
										<div class="form-group col-sm-12">
											<label for="firstname" class="control-label"
												>角色名字</label
											>
											<div class="col-sm-12 rolename">
												<input
													type="text"
													class="form-control"
													placeholder="请输入角色名字"
													id="rolename"
												/>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-10">
												<div id="roleauth" class="checkbox">
													<label>
														<input
															value="SystemIndex"
															type="checkbox"
															class="checkbox_role"
														/>系统设置
													</label>
													<label>
														<input
															value="MemberIndex"
															type="checkbox"
															class="checkbox_role"
														/>会员管理
													</label>
													<label>
														<input
															value=" ArticleIndex"
															type="checkbox"
															class="checkbox_role"
														/>文章管理
													</label>
												</div>
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary" id="add_role">
										添加角色
									</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal -->
					</div>
				</div>
				<div class="col-sm-12 padding_0">
					<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
						添加角色
					</button>
				</div>
			</form>
			<div class="classifly_list">
				<strong>分类列表</strong>
				<ul class="list-group">
					<li class="list-group-item">
						<p>id</p>
						角色名
					</li>
				</ul>
			</div>
		</div>
		<div id="myAlert" class="alert alert-success col-sm-4 col-sm-offset-3">
			<a href="#" class="close" data-dismiss="alert">&times;</a>
			<strong>文章发布成功!!!</strong>
		</div>
		<div>
			<div class="form-group col-sm-12 add_role">
				<!-- 模态框（Modal） -->
				<div
					class="modal fade"
					id="myModal_change"
					tabindex="-1"
					role="dialog"
					aria-labelledby="myModal_change"
					aria-hidden="true"
				>
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button
									type="button"
									class="close"
									data-dismiss="modal"
									aria-hidden="true"
								>
									&times;
								</button>
								<h4 class="modal-title" id="myModal_change">修改角色</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" role="form">
									<div class="form-group col-sm-12">
										<label for="firstname" class="control-label"
											>角色名字</label
										>
										<div class="col-sm-12 rolename">
											<input
												type="text"
												class="form-control"
												placeholder="请输入角色名字"
												id="rolename_change"
											/>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-10">
											<div id="roleauth" class="checkbox">
												<label>
													<input
														value="SystemIndex"
														type="checkbox"
														class="checkbox_role_change"
													/>系统设置
												</label>
												<label>
													<input
														value="MemberIndex"
														type="checkbox"
														class="checkbox_role_change"
													/>会员管理
												</label>
												<label>
													<input
														value=" ArticleIndex"
														type="checkbox"
														class="checkbox_role_change"
													/>文章管理
												</label>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" id="change_role_add">
									修改角色
								</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal -->
				</div>
			</div>
			<div id="change_role" class="col-sm-12">
				<button
					class="btn btn-primary btn-lg"
					data-toggle="modal"
					data-target="#myModal_change"
				>
					添加角色
				</button>
			</div>
		</div>
	</body>
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/register.js"></script>
	<script>
		let admin = new Admin();
		//判断是否有权限
		admin.jurisdiction();

		let classifly_list = document.querySelector(".classifly_list > ul");
		admin.getRoleList();
		document.querySelector("#add_role").addEventListener("click", () => {
			let roleauth = [];
			let formdata = new FormData();
			let checkbox_role = document.querySelectorAll(".checkbox_role");
			checkbox_role.forEach((item) => {
				if (item.checked) {
					roleauth.push(item.value);
				}
			});
			formdata.append("roleauth", roleauth);
			formdata.append("rolename", document.querySelector("#rolename").value);
			axios
				.post("https://ty.php800.cn/api/member/roleadd.php", formdata, {
					headers: {
						TOKEN: localStorage.getItem("token"),
					},
				})
				.then((result) => {
					console.log(result);
					let { verify, msg } = result.data;
					if (verify) {
						admin.getRoleList();
						$("#myModal").modal("hide");
						admin.popUpBox(verify, msg);
					} else {
						admin.popUpBox(verify, msg);
					}
				})
				.catch((err) => console.log(err));
		});
		classifly_list.addEventListener("click", (e) => {
			if (e.target.classList.contains("del")) {
				axios
					.get("https://ty.php800.cn/api/member/roledel.php", {
						params: {
							id: parseInt(e.target.parentNode.children[0].innerHTML),
						},
					})
					.then((result) => {
						let { verify, msg } = result.data;
						if (verify) {
							admin.popUpBox(verify, msg);
						} else {
							admin.popUpBox(verify, msg);
						}
						admin.getRoleList();
					})
					.catch((err) => console.log(err));
			} else if (e.target.classList.contains("change")) {
				console.log(e.target, 2);
				let change_role = document.querySelector("#change_role > button");
				change_role.click();
				document.querySelector("#change_role_add").addEventListener("click", () => {
					let roleauth = [];
					let formdata = new FormData();
					let checkbox_role_change = document.querySelectorAll(".checkbox_role_change");
					checkbox_role_change.forEach((item) => {
						if (item.checked) {
							roleauth.push(item.value);
						}
					});
					formdata.append("roleauth", roleauth);
					console.log(formdata.get("roleauth"));

					formdata.append("rolename", admin.getVal("#rolename_change"));
					formdata.append("id", parseInt(e.target.parentNode.children[0].innerHTML));
					axios
						.post("https://ty.php800.cn/api/member/roleedit.php", formdata, {
							headers: {
								TOKEN: localStorage.getItem("token"),
							},
						})
						.then((result) => {
							let { verify, msg } = result.data;
							if (verify) {
								$("#myModal_change").modal("hide");
								admin.popUpBox(verify, msg);
							} else {
								admin.popUpBox(verify, msg);
							}
							admin.getRoleList();
						})
						.catch((err) => console.log(err));
				});
			}
		});
	</script>
</html>
